<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>position</title>
    <link rel="stylesheet" href="../../styles/common.css">
    <script type="text/javascript" src="../../scripts/common.js"></script>
</head>
<body>
<div id="main_body">
	<h1>position</h1>
  <p id="desc">说明：本文档兼容性测试基础环境为：windows系统；IE6-IE10, Firefox9.0, Chrome16.0, Safari5.1, Opera11.60</p>
    
  <h2>语法</h2>
  <p><strong>position</strong>：static | relative | absolute | fixed</p>
    
    <h2>取值</h2>
  <p><strong>static</strong>：无特殊定位,对象遵循正常文档流。top，right，bottom，left等属性不会被应用。</p>
  <p><strong>relative</strong>：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中。</p>
  <p><strong>absolute</strong>：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。</p>
  <p><strong>fixed</strong>：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。IE6及以下不支持此参数值。
    </p>
    
    <h2>说明</h2>
    <p><strong>检索对象的定位方式。</strong></p>
    <p>对应的脚本特性为position。</p>
    
    <h2>兼容性</h2>
    
  <h2>示例</h2>
    
  <table id="tutorials_table" width="100%" border="0" cellspacing="10" cellpadding="0">
      <tr>
        <td width="300">
        <div style="width:250px; height:150px; background-color:#099;">
        	position:static;
            <div style="width:150px; height:100px; background-color:#06C;">position:static</div>
            position:static; 
        </div>
        </td>
        <td>
        <div class="codes">
          <p>green {}            </p>
          <p>blue {}            </p>
          <p>&nbsp;</p>
          <p>/*如果不指定position,则默认为absolute*/ </p>
        </div>
        </td>
      </tr>
      <tr>
        <td>
        <div style="width:250px; height:150px; background-color:#099;">
        	position:static;
            <div style="width:150px; height:100px; background-color:#06C; position:relative; left:20px; top:20px;">position:relative;<br>left:20px;<br>right:20px;</div>
            position:static; 
        </div>
        </td>
        <td>
        <div class="codes">
          <p>green {}            </p>
          <p>blue {position:relative;}            </p>
          <p>&nbsp;</p>
          <p>/*relative遵循正常文档流，根绝left|right|top|bottom计算偏移量，偏移后原来的位置仍将占有。*/ </p>
        </div>
        </td>
      </tr>
      <tr>
        <td>
        <div style="width:250px; height:150px; background-color:#099; position:relative;">
        	position:relative;
            <div style="width:150px; height:100px; background-color:#06C; position:absolute; left:20px; top:20px;">position:absolute;<br>
              left:20px;<br>
              top:20px;</div>
            position:relative; 
        </div>
        </td>
        <td>
        <div class="codes">
          <p>green {}            </p>
          <p>blue {position:absolute;left:20px;top:20px}            </p>
          <p>&nbsp;</p>
          <p>/*absolute脱离正常文档流，根绝left|right|top|bottom计算偏移量，
            偏移后原来的位置将不占有而其层叠通过z-index属性定义。*/ </p>
          <p>/*当要设置absolute时，则父标签必须为relative或absolute。*/</p>
        </div>
        </td>
      </tr>
      <tr>
        <td>
<div style="width:250px; height:150px; background-color:#099; position:relative;">
        	position:relative;
            <div style="width:150px; height:100px; background-color:#06C; position:fixed; right:20px; bottom:20px;">position:fixed;<br>
              right:20px;<br>
              bottom:20px;</div>
            position:relative; 
        </div>
        </td>
        <td>
        <div class="codes">
<p>green {}  </p>
<p>blue {position:absolute;right:20px;bottom:20px;} </p>
<p>/*对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。看看你的右下角！*/</p>
        </div>
        </td>
      </tr>
  </table>
</div>
</body>
</html>
